<template>
  <div class="risk">
    <eagle-page-list
      ref="eaglePageList"
      @bindData="bindData"
      :queryParams="queryParams"
      :url="url"
      :pageSize="20"
    >
      <div slot="list">
        <eagle-checkgroup
          ref="checkboxGroup"
          v-model="result"
        >
          <div
            v-for="(item, index) in list"
            :key="index"
            :border="false"
            class="mb-10"
          >
            <div class="risk_item_radio">
              <div style="width: 90%" @click="_goTaskDetail(item)">
                <div class="mb-10 dep_sort_name">{{ item.CheckTaskName }}</div>
                <eagle-row gutter="20" class="dep_sort mb-10">
                  <eagle-col span="10">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                      alt=""
                    />{{ item.CheckTypeName }}</eagle-col
                  >
                  <eagle-col span="14">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_danger.png"
                      alt=""
                    />已确认隐患：{{ item.HiddenDangerCnt }}</eagle-col
                  >
                </eagle-row>
                <eagle-row gutter="20" class="dep_sort">
                  <eagle-col span="10">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_user.png"
                      alt=""
                    />{{ item.CreateChnName }}</eagle-col
                  >
                  <eagle-col span="14">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />{{ item.CreateDate | formatDateTime }}</eagle-col
                  >
                </eagle-row>
              </div>
              <eagle-checkbox :name="item.CTCode" :border="false" shape="round"></eagle-checkbox>
            </div>
          </div>
        </eagle-checkgroup>
      </div>
    </eagle-page-list>
    <div class="choose_btm">
      <div class="choose_cancel">
        <eagle-button class="mr-10" type="warning" size="small" @click="checkAll">
          全选
        </eagle-button>
        <eagle-button class="mr-10" type="warning" size="small" @click="toggleAll">
          取消全选
        </eagle-button>
        <div>已选择{{ result.length }}项</div>
      </div>
      <div class="choose_confirm">
        <eagle-button type="info" @click="submit">
          生成
        </eagle-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url:'/DangerCheckTask/GetPageData',
      list: [],
      result:[],
      type: this.$route.query.type,
      reportType: this.$route.query.reportType,
      queryParams: {
        dataType: "Report",
      },
    };
  },
  created(){
    if(this.$store.state.CompanyType=='JG'){
        this.url='/DangerCheckTaskJG/GetPageData'
      }
  },
  methods: {
    bindData(data) {
      this.list = data;
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(false);
    },
    submit() {
      if (this.result.length > 0) {
        this.$router.push({
          name: "Reportdetail",
          query: {
            codes: this.result.join(","),
            type: this.type,
            reportType: this.reportType,
          },
        });
      } else {
        this.$toast.success("请先选择要生成报告的任务");
      }
    },
    // 任务详情()
    _goTaskDetail(item) {
      this.$router.push({
        path: "/Danger/DangerCheckTaskEdit",
        query: { id: item.ID, isDate: false },
      });
    },
  },
};
</script>

<style lang="less" scoped>

.risk_item_radio {
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8f1f8;
}

.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}
.dep_sort_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dep_sort {
  font-size: 12px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
    vertical-align: middle;
  }
}
</style>
